<template>
  <k-form-modal
    width="middle"
    drawer
    :title="state.mode === 1 ? '编辑讲师' : '新增讲师'"
    label-width="90px"
    class="k-form-grid"
    v-bind="formModalState"
    v-on="formModalEvent"
  >
    <el-form-item label="讲师名称" prop="name" class="k-form-item__24">
      <el-input v-model="state.model.name" clearable placeholder="自定义讲师名称" maxlength="20" />
    </el-form-item>
    <el-form-item label="讲师账号" prop="mobile" class="k-form-item__24">
      <el-input
        v-model="state.model.mobile"
        clearable
        placeholder="请输入账号名称、手机号"
        maxlength="11"
        :class="state.model.agent_id ? 'mr-10' : ''"
        :style="state.model.agent_id ? { width: '70%' } : ''"
      />
      <el-link v-if="state.model.agent_id" type="primary" @click="onClickResetPassword">重置密码</el-link>
    </el-form-item>
    <el-form-item label="跟进人" prop="follower" class="k-form-item__24">
      <el-input v-model="state.model.follower" clearable placeholder="请输入跟进人" maxlength="20" />
      <!-- <el-select v-model="state.model.follower" placeholder="请选择跟进人" style="width: 100%" filterable>
        <el-option v-for="item in followerList" :key="item.value" :label="item.name" :value="item.name" :disabled="!item.value" />
      </el-select> -->
    </el-form-item>
    <el-form-item label="考古加账号" prop="kgj_mobile" class="k-form-item__24">
      <el-input v-model="state.model.kgj_mobile" clearable placeholder="请输入考古加账号" maxlength="20" />
    </el-form-item>
    <el-form-item v-if="state.mode !== 1" label="初始密码" prop="password" class="k-form-item__24">
      <el-input v-model="state.model.password" clearable placeholder="请输入初始密码" type="password" show-password maxlength="20" />
    </el-form-item>
    <el-form-item label="推广产品" prop="_typeArr" class="k-form-item__24">
      <el-checkbox-group v-model="state.model._typeArr">
        <el-checkbox v-for="item in typeOptions" :key="item.value" :label="item.value">
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <!-- 考古加 -->
    <div v-if="state.model._typeArr.includes(1)" class="k-form-item__24">
      <el-form-item label="考古加讲师类型" label-width="110px" class="k-form-item__24">
        <el-input value="考古加" readonly />
      </el-form-item>
      <el-form-item label="考古加佣金率" label-width="110px" prop="cos_ratio" class="k-form-item__24">
        <el-input-number
          v-model="state.model.cos_ratio"
          controls-position="right"
          placeholder="请输入讲师佣金率"
          clearable
          :min="10"
          :max="100"
          style="width: 70%"
          class="mr-10"
        />%
      </el-form-item>
      <el-form-item label="考古加账号状态" label-width="110px" prop="status" class="k-form-item__24">
        <el-switch v-model="state.model.status" active-text="合作中" inactive-text="封禁" :active-value="0" :inactive-value="1" inline-prompt />
      </el-form-item>
    </div>
    <!--大赢加  -->
    <div v-if="state.model._typeArr.includes(2)" class="k-form-item__24">
      <el-form-item label="大赢加讲师类型" label-width="110px" class="k-form-item__24">
        <el-input value="大赢加" readonly />
      </el-form-item>
      <el-form-item label="大赢加佣金率" label-width="110px" prop="dyj_cos_ratio" class="k-form-item__24">
        <el-input-number
          v-model="state.model.dyj_cos_ratio"
          controls-position="right"
          placeholder="请输入讲师佣金率"
          clearable
          :min="10"
          :max="100"
          style="width: 70%"
          class="mr-10"
        />%
      </el-form-item>
      <el-form-item label="大赢加账号状态" label-width="110px" prop="dyj_status" class="k-form-item__24">
        <el-switch v-model="state.model.dyj_status" active-text="合作中" inactive-text="封禁" :active-value="0" :inactive-value="1" inline-prompt />
      </el-form-item>
    </div>
    <!--创意  -->
    <div v-if="state.model._typeArr.includes(4)" class="k-form-item__24">
      <el-form-item label="创意讲师类型" label-width="110px" class="k-form-item__24">
        <el-input value="创意" readonly />
      </el-form-item>
      <el-form-item label="创意佣金率" label-width="110px" prop="ad_cos_ratio" class="k-form-item__24">
        <el-input-number
          v-model="state.model.ad_cos_ratio"
          controls-position="right"
          placeholder="请输入讲师佣金率"
          clearable
          :min="10"
          :max="100"
          style="width: 70%"
          class="mr-10"
        />%
      </el-form-item>
      <el-form-item label="创意账号状态" label-width="110px" prop="ad_status" class="k-form-item__24">
        <el-switch v-model="state.model.ad_status" active-text="合作中" inactive-text="封禁" :active-value="0" :inactive-value="1" inline-prompt />
      </el-form-item>
    </div>
  </k-form-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useFormModal, baseConfirm } from '@crud/index';
import { lecEdit, lecAdd, lecResetPws } from '@/api/crm-agency/kgj/lecturer';
import { ElMessage } from 'element-plus';
import { lecFollower } from '@/api/crm-agency/dyj/lecturer';
import { extendTypeSelectMap } from '../hooks/use-table';
defineOptions({
  name: 'LecturerListAddEditModal'
});
const emits = defineEmits(['success']);
const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  model: {
    name: undefined,
    mobile: undefined,
    status: undefined,
    cos_ratio: undefined,
    dyj_status: undefined,
    dyj_cos_ratio: undefined,
    ad_status: undefined,
    ad_cos_ratio: undefined,
    password: undefined,
    follower: undefined,
    extend_type: undefined,
    kgj_mobile: undefined,
    agent_id: undefined,
    _typeArr: [1]
  },
  rules: {
    name: [{ required: true, message: '请输入讲师名称' }],
    mobile: [{ required: true, message: '请输入讲师账号' }],
    follower: [{ required: true, message: '请选择跟进人' }],
    cos_ratio: [{ required: true, message: '请输入考古加佣金率' }],
    dyj_cos_ratio: [{ required: true, message: '请输入大赢加佣金率' }],
    ad_cos_ratio: [{ required: true, message: '请输入创意佣金率' }],
    password: [{ required: true, message: '请输入初始密码' }],
    _typeArr: [{ required: true, message: '至少选择一个产品' }]

  },
  onShow: (mode = 0, data: any) => {
    getFollower();
    if (data) {
      state.model = {
        ...state.model,
        name: data.name,
        mobile: data.mobile,
        status: data.status,
        cos_ratio: data.cos_ratio ? data.cos_ratio * 100 : undefined,
        dyj_status: data.dyj_status,
        dyj_cos_ratio: data.dyj_cos_ratio ? data.dyj_cos_ratio * 100 : undefined,
        ad_status: data.ad_status,
        ad_cos_ratio: data.ad_cos_ratio ? data.ad_cos_ratio * 100 : undefined,
        password: data.password,
        follower: data.follower,
        kgj_mobile: data.kgj_mobile,
        agent_id: data.agent_id,
        _typeArr: data.extend_type ? extendTypeSelectMap[data.extend_type]:[]
      };
    }
  },
  onSubmit: async (model: any, mode = 0) => {
    const extendType = model._typeArr.reduce((pre:number, cur:number) => pre+cur, 0);
    let params = {
      ...model,
      cos_ratio: model.cos_ratio ? model.cos_ratio / 100 : 0,
      dyj_cos_ratio: model.dyj_cos_ratio ? model.dyj_cos_ratio / 100 : 0,
      ad_cos_ratio: model.ad_cos_ratio ? model.ad_cos_ratio / 100 : 0,
      extend_type: extendType,
      _typeArr: undefined
    };

    if (extendType === 1) {
      params.ad_status = 0;
      params.ad_cos_ratio = 0;
      params.dyj_status = 0;
      params.dyj_cos_ratio = 0;
    } else if (extendType === 2) {
      params.status = 0;
      params.cos_ratio = 0;
      params.ad_status = 0;
      params.ad_cos_ratio = 0;
    } else if (extendType === 3) {
      params.ad_status = 0;
      params.ad_cos_ratio = 0;
    } else if (extendType === 4) {
      params.dyj_status = 0;
      params.dyj_cos_ratio = 0;
    }
    const res = mode === 1 ? await lecEdit(params) : await lecAdd(params);
    const { success, message } = res.data ?? {};
    if (success) {
      ElMessage.success(mode === 1 ? '编辑成功' : '新增成功');
      emits('success');
    } else {
      ElMessage.error(message);
    }
    return res;
  }
});
// 重置密码
const onClickResetPassword = async () => {
  await baseConfirm({ title: '重置密码', message: '确定重置该讲师登陆密码？' });
  await lecResetPws({ id: state.model.agent_id });
  ElMessage.success('成功重置密码');
};
const typeOptions = [
  {
    label: '考古加',
    value: 1
  },
  {
    label: '创意',
    value: 4
  },
  {
    label: '大赢加',
    value: 2
  }
];
const followerList = ref<any>([]);

const getFollower = async () => {
  const res = await lecFollower();
  if (res.err) return;
  followerList.value = res.data.data;
};
defineExpose({
  show: methods.show
});
</script>
<style scoped>
.mr-10 {
  margin-right: 10px;
}
</style>
